<template>
  <div class="register">
    <h1>注册</h1>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="RegisterForm.username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="RegisterForm.password" required />
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码:</label>
        <input type="password" id="confirmPassword" v-model="RegisterForm.confirmPassword" required />
        <span v-if="passwordMismatch" class="error">密码不匹配</span>
      </div>
      <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="RegisterForm.email" required />
      </div>
      <div class="form-group">
        <label for="phone">手机号:</label>
        <input type="tel" id="phone" v-model="RegisterForm.phone" required />
      </div>

      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
		RegisterForm:{
			  username: '',
			  email: '',
			  phone: '',
			  password: '',
			  confirmPassword: ''			
		}

    }
  },
  computed: {
    passwordMismatch() {
      return this.RegisterForm.password !== this.RegisterForm.confirmPassword;
    }
  },
  methods: {
    handleRegister() {
		let _this=this;
      if (this.passwordMismatch) {
        alert('密码不匹配，请重新输入');
        return;
      }
      // 处理注册逻辑
      // console.log('用户名:', this.RegisterForm.username);
      // console.log('邮箱:', this.RegisterForm.email);
      // console.log('手机号:', this.RegisterForm.phone);
      // console.log('密码:', this.RegisterForm.password);
      // 这里可以添加实际的注册逻辑

	  this.$axios.post('/user', {
	      
			  
			  username: this.RegisterForm.username,
			  password:this.RegisterForm.password,
			  phone:this.RegisterForm.phone,
			  email:this.RegisterForm.email
	      
	    })
	    .then(function (response) {
			alert("注册成功");
			_this.$router.push("/");
	    })
	    .catch(function (error) {
	      console.log(error);
	    });
    }
  }
}
</script>

<style scoped>
.register {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h1 {
  text-align: center;
  color: #333; /* 标题颜色 */
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px; /* 每个输入框之间的间距 */
}

label {
  margin-bottom: 5px;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #42b983; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #36a76a; /* 按钮悬停效果 */
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
</style> 